<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../static/vue/2.6.10/vue.js" type="text/javascript"></script>
    <script src="../static/vue-router/3.1.3/vue-router.js" type="text/javascript"></script>
    <title>vue-router</title>
</head>
<body>
    <div id="app">
        <h1>Hello App!</h1>
        <p>
            <router-link to="/home">Home</router-link>
            ||
            <router-link to="/user/123">View User</router-link>
            ||
            <router-link to="/prop/321">View Prop</router-link>
            ||
            <router-link to="/about">About</router-link>
        </p>
        <router-view></router-view>
    </div>
</body>

<script type="text/javascript">
    const Home = {
        template: '<div>Home</div>'
    };
    const About = {
        template: '<div>About</div>'
    };

    const User = {
        template: '<div>User => {{$route.params.id}}</div>'
    };

    const Props = {
        props: ['id'],
        template: '<div>Props => {{id}}</div>'
    };

    const routes = [
        {path: '/home', component: Home},
        {path: '/user/:id', component: User},
        {path: '/prop/:id', component: Props, props: true},
        {path: '/about', component: About},
    ];

    const router = new VueRouter({
        routes: routes
    });

    const app = new Vue({
        router
    }).$mount('#app')
</script>
</html>
